<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-09-10 17:28:41
-->
<template>
  <BaseDialog v-model="dialogVisible" :title="title" style="width: 850px" width="850px" :before-close="handleClose">
    <el-form ref="refDialogForm" v-loading="formLoading" class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '80px'" :model="formData" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <BaseSelect v-model="formData.type" :options="g_options.inquiryCoseTypeOptions"
              :label="$t('travelAgency.type')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="费用摘要" prop="summary">
            <TextInput v-model="formData.summary" label="费用摘要" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商" prop="supplier">
            <!-- <TextInput v-model="formData.supplier" label="供应商" /> -->
            <el-select v-model="formData.supplier" :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('supplier.supplierName')
                )
              ">
              <el-option v-for="item in dropList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="费用明细" prop="through">
            <TextInput v-model="formData.through" label="费用明细" />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="原币金额" prop="origCurrPrice">
            <TextInput v-model="formData.origCurrPrice" verify-type="int" :maxlength="10" label="原币金额" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="币种" prop="currency">
            <BaseSelect v-model="formData.currency" :options="g_options.currencyOptions" label="币种" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="汇率" prop="exRate">
            <TextInput v-model="formData.exRate" verify-type="float" :maxlength="4" label="汇率" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本币金额" prop="principalPrice">
            <TextInput v-model="formData.principalPrice" verify-type="int" :maxlength="10" label="本币金额" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注说明" prop="remark">
            <TextInput v-model="formData.remark" type="textarea" :maxlength="512" :rows="4" label="备注说明" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
          }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
          }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  id: {
    type: String,
    default: ''
  },
  row: {
    type: Object,
    default: () => { }
  }
})

const emit = defineEmits(['add', 'update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() => (props.type === 'add' ? '新建成本' : '编辑成本'))
const dropList = ref([])
const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  type: '',
  summary: '',
  supplier: '',
  origCurrPrice: '',
  currency: '',
  exRate: '',
  principalPrice: '',
  remark: ''
})
const rules = {
  type: g_rules.selectRule('类型'),
  summary: g_rules.commonInputText('费用摘要'),
  // supplier: g_rules.commonInputText('供应商'),
  // origCurrPrice: g_rules.amount,
  // currency: g_rules.selectRule('币种'),
  exRate: g_rules.exchangeRate({}),
  principalPrice: g_rules.amount
}

onMounted(async () => {
  getDropList()
  if (props.type === 'edit') {
    g_utils.assignFormData(formData.value, props.row)
    props.row.id && (formData.value.id = props.row.id)
  }
})

const getDropList = () => {
  g_api.travelAgency
    .apiSupplierDroplist()
    .then(({ code, data }) => {
      if (code === '200' && data) {
        dropList.value = data
      }
    })
}

const handleClose = _ => {
  dialogVisible.value = false
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    if (!valid) return
    formLoading.value = true
    const urlMethod =
      props.type === 'add'
        ? g_api.travelAgency.apiTeamCostCreate
        : g_api.travelAgency.apiTeamCostUpdate
    urlMethod({
      ...formData.value,
      teamId: props.id
    })
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
